<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title> 水平排列 </title>
  <style type="text/css">
    div#container {
      border: 1px solid black;
      padding: 5px;
      width: 600px;
      height: 140px;
      display: box;
      display: -moz-box;
      display: -webkit-box;
      box-orient: horizontal;
      -moz-box-orient: horizontal;
      -webkit-box-orient: horizontal;
    }

    div>div {
      border: 1px solid #aaf;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      border-radius: 12px 12px 0px 0px;
      padding: 5px;
    }
  </style>
</head>

<body>
  <div id="container">
    <div style="box-flex:1;-moz-box-flex:1;
      -webkit-box-flex:1;">栏目一</div>
    <div>栏目二</div>
    <div style="box-flex:3;-moz-box-flex:3;
      -webkit-box-flex:3;">栏目三</div>
  </div>
</body>
</html>
